import {connect} from 'react-redux'
import React, { Component } from 'react'
interface IProps{
    history:any,
    addRegistory:any
}
interface IState{
    userName:string,
    passWord:string
}
export class Registory extends Component<IProps,IState> {
    constructor(props:any){
        super(props)
        this.state={
            userName:'',
            passWord:'',
        }
    }
    getname=(e:any)=>{
        this.setState({
            userName:e.target.value
        })
    } 
    getpass=(e:any)=>{
        this.setState({
           passWord:e.target.value
        })
    }
    registory=()=>{
        let {userName,passWord} = this.state
        this.props.addRegistory(userName,passWord)
        this.props.history.push("/login")
    }
    render() {
        let {userName,passWord} = this.state
        return (
            <div className="registory">
                <h1>用户注册</h1>
                  <ul>
                    <li><input type="text" placeholder="请输入用户名" value={userName} onChange={(e)=>{this.getname(e)}}/></li>
                    <li><input type="text" placeholder="请输入手机号"/></li>
                    <li><input type="text" placeholder="请输入密码" value={passWord} onChange={(e)=>{this.getpass(e)}}/></li>
                    <li><button  onClick={()=>{this.registory()}}>注册</button></li>
                </ul>
            </div>
        )
    }
}
const state=(state:any)=>{
    return {

    }
}
const dispatch=(dispatch:any)=>{
    return {
        addRegistory(user:string,pass:string){
           dispatch({type:"ADD_REGISTORY",user,pass})
        }
    }
}
export default connect(state,dispatch)(Registory) 
